<script setup lang="ts">
import { onBeforeRouteUpdate, useRoute } from "vue-router";
import { ref } from "vue";
import { getMaterialByIDAPI } from "../api/section.ts";
import { Material } from "../index";
import MaterialItem from "../components/material/MaterialItem.vue";

const route = useRoute();
const material = ref<Material | null>(null);

const getData = (id: number) => {
  getMaterialByIDAPI(id)
    .then((response) => {
      if (response.status !== 200) {
        throw new Error("网络错误");
      }
      return response.data;
    })
    .then((result) => {
      material.value = result.data;
    });
};

getData(parseInt(<string>route.params.id));

onBeforeRouteUpdate((to) => {
  // console.log(to.params.id, 123, to.meta.isSection, material.value);
  if (to.meta.isSection) getData(parseInt(<string>to.params.id));
});
</script>

<template>
  <div v-if="material">
    <MaterialItem :material="material" />
  </div>
</template>

<style scoped></style>
